<template>
  <up-popup :show="show" round="24rpx" mode="bottom" closeable @close="close">
    <view class="popup-list">
      <view class="popup-title">选择专家</view>
      <view class="popup-nav">
        <view class="content-nav" v-for="item,index in listData" :key="item.id">
          <view class="content-head">
            <view class="head-avatar">
              <image :src="item.avatar" mode="" class="avatar-img"></image>
            </view>
            <view class="head-name">
              <view>{{item.nickname}}</view>
              <view class="head-title">擅长{{item.expertise}}</view>
            </view>
            <view class="head-btn">
              <up-button text="鉴定" shape="circle" plain color="#A4682F" @click="torelease(item)"></up-button>
            </view>
          </view>
          <view class="content-title">{{item.desc}}</view>
          <view class="content-label">
            <view class="label-box">
              <view class="box-num">
                <view>{{item.count}}</view>
                <view class="num-unit">次</view>
              </view>
              <view class="box-title">累计鉴定</view>
            </view>
            <view class="label-box">
              <view class="box-price">
                <view class="price-unit">￥</view>
                <view>{{item.price}}</view>
              </view>
              <view class="box-title">鉴定费用</view>
            </view>
          </view>
        </view>
        <view class="content-not" v-show="listData.length ==0">
          <image src="@/static/home/image/messageNone.png" mode="" class="none-img"></image>
          <view class="none-text">暂无相关专家</view>
        </view>
      </view>
    </view>
  </up-popup>
</template>

<script setup>
  import {
    ref,
    reactive,
    defineProps,
    defineEmits
  } from 'vue'
  const {
    show,
    listData
  } = defineProps(['show', "listData"])
  const emit = defineEmits(['showClose', 'release'])
  const showPopup = ref()


  function close() {
    emit('showClose', false)
  }

  function torelease(item) {
    emit("release", item)
  }
</script>

<style lang="scss" scoped>
  .popup-list {
    width: 100vw;
    opacity: 1;
    display: flex;
    flex-direction: column;

    .popup-title {
      width: 100%;
      height: 88rpx;
      font-size: 32rpx;
      font-weight: 500;
      line-height: 88rpx;
      color: rgba(51, 51, 51, 1);
      text-align: center;
      border-bottom: 2rpx solid #EBEBEB;
    }

    .popup-nav {
      width: 100%;
      max-height: 946rpx;
      display: flex;
      flex-direction: column;
      flex: 1;
      align-items: center;
      box-sizing: border-box;
      padding: 30rpx;
      background-color: #F2F2F2;
      overflow: scroll;

      .content-nav {
        width: 100%;
        border-radius: 16rpx;
        background: #FFFFFF;
        margin-top: 20rpx;
        box-sizing: border-box;
        padding: 30rpx 30rpx 0;

        .content-head {
          display: flex;
          width: 100%;
          align-items: center;

          .head-avatar {
            height: 100rpx;
            width: 100rpx;
            border-radius: 50%;

            .avatar-img {
              height: 100rpx;
              width: 100rpx;
              border-radius: 50%;
            }
          }

          .head-name {
            flex: 1;
            margin: 0 24rpx;
            font-size: 32rpx;
            font-weight: 500;
            color: rgba(51, 51, 51, 1);

            .head-title {
              font-size: 26rpx;
              font-weight: 400;
              color: rgba(102, 102, 102, 1);
              margin-top: 4rpx;
            }
          }

          .head-btn {
            width: 136rpx;
            height: 64rpx;

            .u-button {
              height: 64rpx;
            }
          }
        }

        .content-title {
          margin-top: 24rpx;
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 2;
          overflow: hidden;
          text-overflow: ellipsis;
          line-height: 1.5;
        }

        .content-label {
          width: 100%;
          height: 140rpx;
          border-top: 2rpx solid #ebebeb;
          margin-top: 30rpx;
          box-sizing: border-box;
          padding: 30rpx 0;
          display: flex;

          .label-box {
            height: 100%;
            flex: 1;
            border-right: 2rpx solid #ebebeb;
            display: flex;
            flex-direction: column;
            align-items: center;

            .box-num {
              font-size: 36rpx;
              font-weight: 400;
              color: rgba(51, 51, 51, 1);
              display: flex;
              align-items: baseline;

              .num-unit {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(51, 51, 51, 1);
                margin: 0 4rpx;
              }
            }

            .box-price {
              font-size: 36rpx;
              font-weight: 400;
              color: rgba(245, 32, 32, 1);
              display: flex;
              align-items: baseline;

              .price-unit {
                font-size: 24rpx;
                font-weight: 400;
                color: rgba(245, 32, 32, 1);
              }
            }

            .box-title {
              margin-top: 4rpx;
              font-size: 24rpx;
              font-weight: 400;
              color: rgba(153, 153, 153, 1);

            }
          }

          .label-box:last-child {
            border: none;
          }
        }
      }

      .content-not {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        background-color: #F2F2F2;

        .none-img {
          width: 240rpx;
          height: 240rpx;

        }

        .none-text {
          font-size: 28rpx;
          font-weight: 400;
          color: rgba(102, 102, 102, 1);
          margin-top: 32rpx;
        }
      }
    }
  }
</style>